<template>
  <basic-dialog
    :width="'384px'"
    :visible.sync="fieldSettingVisible"
    :title="'设置显示字段'"
    :show-footer="false"
    :handle-close="handleClose"
    :handle-opened="handleOpened"
  >
    <div class="search_field">
      <el-input
        class="input_field"
        v-model="filterVal"
        @keyup.enter.native="handleSearch"
      />
      <el-button @click="handleSearch">查找</el-button>
      <div class="right_btn">
        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">完成配置</el-button>
      </div>
    </div>
    <table class="itxst table-header">
      <tr>
        <th class="column1">显示</th>
        <th class="column2">名称</th>
        <th class="column3">列宽</th>
        <th class="column4">操作</th>
        <th class="column5"></th>
      </tr>
    </table>
    <div class="table-box" :style="boxHeight" v-loading="tableLoading">
      <table class="itxst table-body">
        <draggable
          v-model="tableFieldsList"
          animation="500"
          force-fallback="true"
          handle=".move"
        >
          <tr
            v-for="(item, index) in tableFieldsList"
            :key="item.id"
            :id="item.prop"
          >
            <td class="move column1">
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="item.isShow"
                :width="switchWidth"
                :disabled="!item.isCancelShow"
              />
            </td>
            <td class="move column2">{{ item.label }}</td>
            <td class="move column3">
              <el-input v-model="item.width"></el-input>
            </td>
            <td class="move column4">
              <el-button v-if="index != 0" size="mini" type="text" @click="handleSetTop(tableFieldsList, index)">置顶</el-button>
              <el-button v-if="index != tableFieldsList.length - 1" size="mini" type="text" @click="handleSetBottom(tableFieldsList, index)">置底</el-button>
            </td>
          </tr>
        </draggable>
      </table>
    </div>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import Draggable from 'vuedraggable';
import {
  queryTableFieldService,
  updateTableFieldInfoService
} from '@/api/purchase/abnormalPurchase';

export default {
  components: {
    Draggable,
    BasicDialog
  },
  props: {
    fieldSettingVisible: {
      type: Boolean,
      default: false
    },
    menuId: {
      type: [Number, String],
    },
    // 异常类型
    selectType: {
      type: [Number, String],
    },
  },
  data () {
    return {
      drag: false,
      filterVal: '',
      boxHeight: 'height: ' + (document.body.clientHeight * 6) / 10 + 'px;',
      switchWidth: 28,
      tableFieldsList: [],
      submitLoading: false,
      tableLoading: false,
    };
  },
  methods: {
    // 打开弹框执行事件
    handleOpened () {
      this.queryListAction();
    },
    // 关闭弹框
    handleClose () {
      this.$emit('update:fieldSettingVisible', false);
    },
    // 置顶
    handleSetTop (arr, index) {
      arr.unshift(arr.splice(index, 1)[0]);
    },
    // 置底
    handleSetBottom (arr, index) {
      arr.push(arr.splice(index, 1)[0]);
    },
    // 查找
    handleSearch () {
      const tempList = this.tableFieldsList.filter(
        (data) =>
          !this.filterVal ||
          data.label.toLowerCase() == this.filterVal.toLowerCase()
      );
      if (tempList.length !== 0) {
        window.location.href = '#' + tempList[0].prop;
      }
    },
    // 表格数据查询
    async queryListAction () {
      const data = {
        menuId: this.menuId,
        selectType: this.selectType,
      };
      const res = await queryTableFieldService(data, state => { this.tableLoading = state });
      if (res) {
        this.tableFieldsList = res.data;
      }
    },
    // 完成配置
    async handleSubmit () {
      this.tableFieldsList.map((item, index) => {
        item.ord = index + 1;
        return item;
      });
      const data = {
        menuId: this.menuId,
        selectType: this.selectType,
        columnSettings: this.tableFieldsList
      };
      const res = await updateTableFieldInfoService(data, state => { this.submitLoading = state });
      if (res) {
        this.$message.success('操作成功');
        this.$emit('handleSetTableColumn', this.tableFieldsList);
        this.handleClose()
      }
    }
  }
};
</script>
<style lang="less" scoped>
.search_field {
  border-top: 1px solid #dee1e6;
  padding: 13px 0 10px;
  .right_btn {
    float: right;
    border-left: 1px solid #dfe1e6;
    padding: 0 12px;
  }
  .input_field {
    width: 170px;
    margin: 0 15px 0 20px;
  }
}
.table-box {
  overflow-y: scroll;
}
.table-header {
  width: 384px;
}
table.itxst {
  color: #333;
  border-collapse: collapse;
  font-size: 12px;
  text-align: center;
  th {
    height: 32px;
    line-height: 32px;
    background: #ebebf0;
    color: #999;
  }
  td {
    padding-top: 6px;
  }
  td.move:hover {
    cursor: move;
  }
  tr {
    cursor: pointer;
  }
  .column1 {
    width: 70px;
  }
  .column2 {
    width: 134px;
    text-align: left;
  }
  .column3, .column4 {
    width: 90px;
  }
  .column5 {
    width: 16px;
  }
}
/deep/ .el-dialog__body {
  padding: 0;
}
/deep/ .el-switch__core {
  height: 14px;
  border-radius: 14px;
}
/deep/ .el-switch__core:after {
  width: 12px;
  height: 12px;
  top: 0;
}
/deep/ .el-switch.is-checked .el-switch__core::after {
  margin-left: -12px;
}
/deep/ .column3 .el-input--small .el-input__inner {
  width: 54px;
  height: 24px;
  padding: 0 5px;
  border-radius: 14px;
  text-align: center;
}
</style>
